Bootstrap 5 — Form Layouts

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add layouts to forms with Bootstrap 5.

Form Layout

We can use Bootstrap 5 to add some layouts to our forms.

It provides us with margin utilities to add some structure.

For example, we can write:

<div class="mb-3">
  <label for="first-name" class="form-label">first name</label>
  <input type="text" class="form-control" id="first-name" placeholder="first name">
</div>

<div class="mb-3">
  <label for="last-name" class="form-label">last name</label>
  <input type="text" class="form-control" id="last-name" placeholder="last name">
</div>

We have the mb-3 class to ad some margins below the form.

Labels have the form-label class.

And inputs have the form-control class to apply Bootstrap styles.

Form Grid

We can put our form fields in a grid if we need forms fields side by side.

For example, we can write:

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>

 <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

To have 2 input boxes side by side.

We have one div with row class and 2 divs with the col classes to add the columns.

The $enable-grid-classes SASS variables to be enabled and it’s on by default.

Gutters

We can add gutters with the g-* classes.

For example, we can write:

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

We added some gutters with the g-3 class.

The gap is added to the div.

We can add more complex forms using the grid:

<form class="row g-3">
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>

 <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>

 <div class="col-12">
    <label for="address" class="form-label">Address</label>
    <input type="text" class="form-control" id="address" placeholder="Address">
  </div>

 <div class="col-12">
    <label for="address2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="address2" placeholder="Apartment, studio, or floor">
  </div>

 <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city">
  </div>

 <div class="col-md-4">
    <label for="inputState" class="form-label">Region</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>

 <div class="col-md-2">
    <label for="postal" class="form-label">Postal Code</label>
    <input type="text" class="form-control" id="postal">
  </div>

 <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>

 <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
</form>

We add multiple fields to our form.

Some are wider than others.

Those are added with the col-* classes

Horizontal Form

We can add the .row class to add form groups with the .col-*-* classes to set the width of the labels and controls.

Also, we’ve to add the .col-form-label class to the labels so they’re vertically centered with their form controls.

For example, we can write:

<form>
  <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
    </div>
  </div>

 <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>

 <fieldset>
    <div class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Fruit</legend>

 <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
          <label class="form-check-label" for="apple">
            apple
          </label>
        </div>

<div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="banana" value="banana">
          <label class="form-check-label" for="banana">
            Second radio
          </label>
        </div>

 <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="fruit" id="orange" value="orange" disabled>
          <label class="form-check-label" for="orange">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>

 <div class="row mb-3">
    <div class="col-form-label col-sm-2 pt-0">I agree</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="agree">
        <label class="form-check-label" for="agree">
          I agree
        </label>
      </div>
    </div>
  </div>

 <button type="submit" class="btn btn-primary">Sign up</button>
</form>

We have a form with the labels and form controls side by side.

Also, we added the mb-3 class to add some margins to the bottom.

And pt-0 removes the top padding.

Conclusion

We can add form layouts with various utility classes provided by Bootstrap.